body {
    height: 100%;
}

html {
    height: 100%;
}

.view {
    background-color: #F4F4F4;
    height: 100%;
    padding-top: 50px;
    max-width: 500px;
    min-width: 320px;
    margin: 0 auto;

    .topsearch {
        position: fixed;
        transform: translateX(-50%);
        top: 0;
        left: 50%;
        z-index: 100;
        width: 100%;

        height: 50px;
        background-color: #ffff;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        max-width: 500px;
        min-width: 320px;



        input {
            flex: 1;
            height: 32px;
            border: 1px blue solid;
            border-radius: 50px;
            padding-left: 20px;
            

            &::placeholder {
                color: lawngreen;
                font-size: 20px;
            }
        }
    }

    .slist {
        width: 100%;
        height: 184px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        background: white;

        box-sizing: border-box;
        display: flex;

        ul {
            height: 184px;
            background-color: #fff5f1;


            flex: 1;

            border-right: 1px solid white;
            box-sizing: border-box;

            &:nth-child(1) {
                border-radius: 10px 0 0 10px;

                li:nth-child(1) {
                    border-radius: 10px 0 0 0;

                }

            }


            li {
                text-align: center;
                height: 58px;

                &:nth-child(1) {
                    background: linear-gradient(to bottom;
                            orange;
                            yellow;

                        );

                }

                &:nth-child(3) {
                    border-radius: 0 0 0 10px;
                    border-top: 1px white solid;
                    box-sizing: border-box;
                }

                img {
                    width: 28px;
                    height: 28px;
                    line-height: 15px;
                    margin-top: 10px;
                }

            }

            &:nth-child(2) {
                background-color: #eff9ff;

                li {
                    &:nth-child(1) {
                        background: linear-gradient(to bottom;
                                #3d86fa;
                                #4eaefa);
                    }

                }

            }

            &:nth-child(3) {
                background-color: #f2f5ff;

                li {
                    &:nth-child(1) {
                        background: linear-gradient(to bottom;
                                #618dff;
                                #66a3ff);
                    }
                }


            }

            &:nth-child(4) {
                background-color: #ecfcf8;

                li {
                    &:nth-child(1) {
                        background: linear-gradient(to bottom;
                                #32c5b6;
                                #4ed6b3);
                    }
                }


            }

            &:nth-child(5) {
                border-radius: 0 10px 10px 0;
                background-color: #fff9f2;

                li {
                    &:nth-child(1) {
                        background: linear-gradient(to bottom;
                                #ff8b39;
                                #ffa846);
                        border-radius: 0 10px 0 0;
                    }
                }
            }


        }
    }

    .nav {
        background: linear-gradient(to bottom;
                white 0%;
                #F4F4F4 100%; );
        width: 100%;
        height: 24px;

        display: flex;
        justify-content: center;
        padding-top: 13px;

        .lnav {
            width: 14px;
            height: 4px;
            background-color: blue;
            border-radius: 20px;
            margin-right: 10px;

        }

        .rnav {
            width: 4px;
            height: 4px;
            background-color: #F4F4F4;
            border-radius: 2px;
        }
    }

    .banner {
        display: flex;
        background-color: #F4F4F4;

        height: 148px;
        padding: 0 12px;



        .lbanner {
            height: 148px;
            width: 50%;
            flex: 1;
            background-color: white;
            margin-left: 8px;
            padding: 8px;
            border-radius: 10px;
            box-sizing: border-box;

            .aa {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    
                    height: 20px;
                    flex: 1;
                }
                span{
                    flex: 1;
                    height: 16px;
                    border: 1px solid  #ffebe3;
                    background-color: #ffebe3;
                    border-radius: 4px;
                    color:red;
                    display: inline-block;
                    font-size: 10px;
                    line-height: 16px;
                    text-align: center;
                }
            }
            .bb{
                width: 100%;
                height: 106px;
                img{
                    width: 100%;
                    height: 84px;
                    margin: 2px;
                    border-radius: 6px;
                    
                }
                div{
                    color: red;
                    font-size: 16px;
                    height: 18px;
                    line-height: 18px;
                }
            }


        }

        .rbanner {
            height: 148px;
            flex: 1;
            background-color: white;
            width: 50%;
            margin-left: 8px;
            padding: 8px;
            border-radius: 10px;
            box-sizing: border-box;
              .aa {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
               
                img {
                    
                    height: 20px;
                    flex: 1;
                    
                }
                span{
                    flex: 1;
                    height: 16px;
                    line-height: 16px;
                    border: 1px solid #fdefd2;
                    background-color: #fdefd2;
                    border-radius: 4px;
                    color: #ae6e15;
                    display: inline-block;
                    font-size: 10px;
                    text-align: center;
                }
            }
            .bb{
                width: 100%;
                height: 106px;
                display: flex;
                 justify-content: space-between;
                img{
                    width: 95%;
                    height: 84px;
                    flex: 1;
                    margin-left: 4px;
                    border-radius: 6px;
                    
                }
                div{
                    color: rgb(19, 19, 19);
                    font-size: 11px;
                    height: 18px;
                    line-height: 18px;
                }
            }


        }
    }

    .bot {
        margin-top: 10px;
        padding: 0 12px 12px 12px;
        box-sizing: border-box;

        height: 115px;

        img {
            width: 100%;
            height: 103px;
            border-radius: 10px;
        }

    }

    .footer {

        width: 100%;
        height: 32px;
        margin: 0 12px;
        margin-top: 12px;


        margin-left: -1px;

        .z {

            height: 32px;
            padding-left: 12px;
            padding-right: 12px;
            display: flex;
            justify-content: space-around;
            

            .lf {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                max-width: 102px;
                padding: 0 12px 10 12px;
                border: 1px solid #999;
                border-radius: 4px;
                a{
                    text-align: center;
                    height: 32px;
                    line-height: 32px;
                    img{
                        width: 13px;
                        height: 17px;
                    }
                }

            }
        }




    }

    .footer2 {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 14px;
        margin-top: 13px;

        .bo {
            flex: 1;
            max-width: 20%;
        }

    }

    .footer3 {
        margin-top: 12px;

        text-align: center;
        height: 12px;

        p {
            flex: 1;
        }
    }

    .end {
        height: 49px;
        width: 100%;
        background-color: #32c5b6;
        position: fixed;
        bottom: 0;
        transform: translateX(-50%);
        left: 50%;
        z-index: 100;
        max-width: 500px;
        min-width: 320px;
        margin: 0 auto;

        ul {
            height: 49px;
            width: 100%;
            display: flex;
            justify-content: space-around;

            li {
                height: 49px;
                flex: 1;
                width: 25%;
                background-color: #4eaefa;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;


                font-size: 11px;

                div {
                    background-image: url(../../img/tabbar.png);
                    background-repeat: no-repeat;
                    background-position: -0px -0px;
                    background-size: 32px;
                    width: 32px;
                    height: 32px;

                }
            }

        }
    }
}